<template>
  <div class="login">
      <div class="commhead">
        登录/注册
      </div>
     <div class="loginmsg">
     	<div class="font">为了方便您及时查询订单信息，鲜蜂侠需要验证您的手机号为查询帐号</div>
     </div>
     <input v-model="admin" type="text" placeholder="请输入手机号" class="user" maxlength="11" @blur='checkHandle'>
     <input v-model="pwd" type="password" placeholder="请输入密码" name="pwd" class="pasd" maxlength="11" >
     <button @click='LoginHandle'>登录</button>
     <button @click='regHandle'>注册</button>
  </div>
</template>

<script>


    export default {
        name: 'MyComponent',
        data(){
        	return{
        		admin:'',
        		pwd:''
        	}
        },
        components:{
        	
        },
        methods:{
          checkHandle(){
             if(!(/^1[34578]\d{9}$/.test(this.admin))){
               this.$store.dispatch('good/showMassagebox','请输入手机号！')
             }
          },
        	LoginHandle(){
            var that = this
             if(this.admin!='' && this.pwd!=''){
               this.$axios({
                    method: 'get',
                    url:this.HOSTS+'/login',
                    params: {
                        username:that.admin,
                        password:that.pwd
                    }
                }).then(msg=>{
                  console.log(msg)
                    if(msg.data=='登陆成功'){
                      this.$store.dispatch('good/showMassagebox','登录成功！')
                      localStorage.setItem('username',this.admin);
                      this.$router.push("/home")

                    }else {
                      this.$store.dispatch('good/showMassagebox','登录失败！')
                    }
                })
             }else {
               this.$store.dispatch('good/showMassagebox','请输入完整信息！')
             }
               
              
        		
        	},
        	regHandle(){
                var that = this
            if(this.admin!='' && this.pwd!=''){
              this.$axios({
                    method: 'get',
                    url:this.HOSTS+'/check',
                    params: {
                        username:that.admin,
                        password:that.pwd
                    }
                }).then(msg=>{
                  if(msg.data=='已注册'){
                      alert('账号已注册！请登录！')
                    }else {
                      this.$axios({
                          method: 'get',
                          url:this.HOSTS+'/register',
                          params: {
                              username:that.admin,
                              password:that.pwd
                          }
                      }).then(msg=>{
                        if(msg.data.msg=='注册成功'){
                            this.$store.dispatch('good/showMassagebox','注册成功！')
                          }else {
                            this.$store.dispatch('good/showMassagebox','注册失败!')
                          }
                      })
                    }
                  })
                }else {
                  this.$store.dispatch('good/showMassagebox','请输入完整信息！')
                }
        	}
        }
    }
</script>

<style scoped>
.loginmsg{
	width: 100%;
	height: 2rem;
	background-color: #ffd600;
	background-image: url('../assets/images/verify_bg-afc6d424.png');
	background-repeat: no-repeat;
	background-position: 0.1rem 0.58rem; 
}
.font{
	width: 4.8rem;
	height: 1rem;
	position: relative;
	top: 0.7rem;
	left: 2.6rem;
}
.user,.pasd{
	margin-top: 0.1rem;
	width: 100%;
	height: 1rem;
	border: 0px;
	outline: none;
	padding-left: 0.5rem;
	font-size: 0.34rem;
}
.login button{
	margin-top: 0.2rem;
	width: 49.4%;
	height: 1rem;
	background-color: #ffd600;
	border: 0px;
}
.commhead{
  width: 100%;
  height: 1rem;
  background-color: #F9FAFD;
  line-height: 1rem;
  font-weight: bold;
  text-align: center;
  padding: 0 0.1rem;
}
</style>